import { 
  AmbientLight,
  Clock,
  Mesh,
  MeshLambertMaterial,
  PerspectiveCamera,
  Scene, 
  SphereGeometry, 
  SpotLight, 
  SpotLightHelper, 
  TextureLoader, 
  WebGLRenderer
} from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import * as chroma from 'chroma-js';
import setRandomColors from '../../utils/setRanndomColors';
import stats from '../../utils/stats';
// 调用
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

let clock = new Clock();
let scene = new Scene();
let camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

const renderer = new WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// 添加聚光灯
let spotLight = new SpotLight('#ffffff')
spotLight.position.set(-40, 60, -10)
spotLight.castShadow = true
spotLight.shadow.camera.near = 1
spotLight.shadow.camera.far = 100
scene.add(spotLight)
// scene.add(new SpotLightHelper(spotLight))


// 设置 https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.autoRotate = true;

let earthTexture = new TextureLoader().load('/textures/earth/Earth.png')
let planeTexture = new TextureLoader().load('/textures/mars/mars_1k_color.jpg')
let planeMaterial = new MeshLambertMaterial({
  map: earthTexture,
})

scene.add(new Mesh(
  new SphereGeometry(20, 40, 40),
  planeMaterial
))

render();

function render() {
  stats.update();
  orbitControls.update();

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}